<!DOCTYPE HTML>

<!--Hoja de Estilo CSS3 en HTML5-->

<html>
	
	<!--Universidad de San Carlos de Guatemala-->
	<!--Escuela de Formación de Profesores de Enseñanza Media-->
	<!--PEM en Computación e Informática-->
	<!--Catedrático: Jorge Luis Pérez Canto-->
	
	<head>
	
		<!-- Relacionar una hoja de estilo css a una pagina web html: -->
		
		<link href="hojaEstilo.css" rel="stylesheet" type="text/css">
		
		
		<!-- Incrustar código CSS de manera interna -->
		
		<style type="text/css">

			body /* Selector */
			{
				/* Declarar la Tipografía del documento*/
				font-family:Arial,Helvetica, sans-serif;
				
				/* Declarar el color del texto */
				color:#ffffff;
				
				/* Declarar el color de Fondo*/
				background-color:#FFCC00;
				
				/* Degradado Lineal Horizontal con 2 colores en Google Chrome */
				background: -webkit-linear-gradient(top, #65b6cf, #2c2c2c);

				/* Degradado Lineal Vertical con 3 colores en Mozilla Firefox */
				background: -moz-linear-gradient(left, #2c2c2c, #65b6cf, #2c2c2c);
				
				/* Degradado Radial/Circular con 2 colores en Mozilla Firefox */
				background: -moz-radial-gradient(circle, #00B4FF 65%, #4800FF);
			}

			h1, h2
			{
				/* Centrar el texto */
				text-align:center;
				
				/* Texto en cursiva */
				font-style:italic;
				
				/* Texto subrayado */
				text-decoration:underline;
				
				/* Texto en negrita */
				font-weight:bold;
			}

			/* Declarar estilo a la primera letra de un parrafo */
			p::first-letter
			{
				/* Declarar el Tamaño del texto */
				font-size:25px;
			}

			/* Utilizar como selector el "id" de una etiqueta */
			#textoPr
			{
				/* Declarar el ancho (de una sección) */
				width:400px;
				
				/* Declarar la Altura */
				height:300px;
				
				/* Centrar una caja o sección */
				margin:0 auto;
				
				/* Rellenar con espacio (el borde interno de la caja) */
				padding: 50px;
				
				/* Declarar bordes redondeados (para la caja) */
				border-radius: 20px;
				
				/* Declarar un efecto de sombra (para la caja) */
				box-shadow: 0px 0px 30px rgba(0,0,0,1);
			}

			/* Utilizar como selector "class" (en un parrafo) */
			.parrafoInstructor
			{
				color:#00FF80;
			}

			/* Declarar estilo a la lista de un Menu */
			nav ul li
			{
				/* Mostrar lista en línea horizontal */
				display:inline-block;
				
				/* Declarar un margen */
				margin-right: 30px;
				
				/* Mostrar puntero del cursor con el icono de una mano */
				cursor:pointer;
			}

			/* Declarar estilo cuando el puntero del cursor 
			   pasa sobre el elemento de la lista del menu*/
			nav ul li:hover
			{
				background-color:#000;
				color:#0094ff;
			}

			/* Declarar estilo a los enlaces */
			a
			{
				color:#fff;
			}

			label
			{
				/*Declarar saltos de línea (Similar a la etiqueta <br/>)*/
				display:block;
			}

			/* Declarar estilo a los input de los Formularios cuando tienen el foco o estan seleccionados */
			input:focus
			{
				background-color:#0026ff;
				color:#fff;
			}
			
		</style>
		
		<footer>
			Copyright (c) 2013. Jorge Luis Pérez Canto, USAC/EFPEM.
		</footer>
		
	</head>
</html>
